<template>
	<div class="dynamic-form-container layout-pd">
		<el-card shadow="hover" header="动态复杂表单">
			<el-form :model="form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
				<el-row :gutter="35">
					<el-col
						:xs="val.xs"
						:sm="val.sm"
						:md="val.md"
						:lg="val.md"
						:xl="val.xl"
						class="mb20"
						v-show="val.isShow"
						v-for="(val, key) in formData"
						:key="key"
					>
						<template v-if="val.type !== ''">
							<el-form-item
								:label="val.label"
								:prop="val.prop"
								:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
								v-if="val.type !== ''"
							>
								<el-input
									v-model="form[val.prop]"
									:placeholder="val.placeholder"
									clearable
									v-if="val.type === 'input'"
									style="width: 100%"
									:disabled="val.disabled"
								></el-input>
								<el-date-picker
									v-model="form[val.prop]"
									type="date"
									:placeholder="val.placeholder"
									v-else-if="val.type === 'date'"
									style="width: 100%"
									:disabled="val.disabled"
								>
								</el-date-picker>
								<el-select
									v-model="form[val.prop]"
									:placeholder="val.placeholder"
									v-else-if="val.type === 'select'"
									style="width: 100%"
									:disabled="val.disabled"
								>
									<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
								</el-select>
								<el-input
									type="textarea"
									v-model="form[val.prop]"
									:placeholder="val.placeholder"
									clearable
									v-if="val.type === 'textarea'"
									style="width: 100%"
									:disabled="val.disabled"
								></el-input>
							</el-form-item>
						</template>
						<template v-else>
							<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
									<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
										<template #label>
											<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
												<el-icon>
													<ele-Plus />
												</el-icon>
											</el-button>
											<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
												<el-icon>
													<ele-Delete />
												</el-icon>
											</el-button>
											<span class="ml10">年度</span>
										</template>
										<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
									<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
										<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
									<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
										<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-row class="flex mt15">
			<div class="flex-margin">
				<el-button size="default" @click="onResetForm">
					<el-icon>
						<ele-RefreshRight />
					</el-icon>
					重置表单
				</el-button>
				<el-button size="default" type="primary" @click="onSubmitForm">
					<SvgIcon name="iconfont icon-shuxing" />
					验证表单
				</el-button>
			</div>
		</el-row>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { formData } from './mock';

// 定义接口来定义对象的类型
interface FormDataOptions {
	label: string;
	value: string;
}
interface FormDataState {
	label: string;
	prop: string;
	placeholder: string;
	clearable: boolean;
	disabled: boolean;
	required: boolean;
	type: string;
	i18n: boolean;
	i18nText: string;
	isShow: boolean;
	xs: number;
	sm: number;
	md: number;
	lg: number;
	xl: number;
	options?: FormDataOptions[];
}
interface DynamicFormState {
	formData: FormDataState[];
	form: any;
}

export default defineComponent({
	name: 'pagesDynamicForm',
	setup() {
		const formRulesOneRef = ref();
		const state = reactive<DynamicFormState>({
			formData,
			form: {
				name: '',
				email: '',
				autograph: '',
				occupation: '',
				list: [
					{
						year: '',
						month: '',
						day: '',
					},
				],
				remarks: '',
			},
		});
		// 新增行
		const onAddRow = () => {
			state.form.list.push({
				year: '',
				month: '',
				day: '',
			});
		};
		// 删除行
		const onDelRow = (k: number) => {
			state.form.list.splice(k, 1);
		};
		// 表单验证
		const onSubmitForm = () => {
			formRulesOneRef.value.validate((valid: boolean) => {
				if (valid) {
					ElMessage.success('验证成功');
				} else {
					return false;
				}
			});
		};
		// 重置表单
		const onResetForm = () => {
			formRulesOneRef.value.resetFields();
		};
		// 页面加载时
		onMounted(() => {});
		return {
			formRulesOneRef,
			onAddRow,
			onDelRow,
			onSubmitForm,
			onResetForm,
			...toRefs(state),
		};
	},
});
</script>
